import React from 'react';
import { Link } from 'react-router-dom';
import isSroll from 'iscroll/build/iscroll-probe';
import OrderDetail from '../Components/OrderDetail';
import { fetchSalesServicelApi } from '../api';
import './index.less';

const editBig = require('src/static/editBig.png');

export default class SalesService extends React.PureComponent {
  state = {
    returnorderlist: []
  }

  componentDidMount() {

    this.fetchList();
  }

  initPagination() {
    if (!this.scroll) {
      document.querySelector('.wrapper').addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
      this.scroll = new isSroll('.wrapper', {
        click: true,
        tap: true,
        probeType: 2,
      });
    }


    this.scroll.on('scrollEnd', () => {
      if (this.totalpage === this.page && !this.state.showloadAllMessage) {
        this.setState({ showloadAllMessage: true }, () => {
          this.scroll.refresh();
        })
        return;
      }

      if (this.scroll.y - 400 < this.scroll.maxScrollY && this.totalpage > this.page) {
        this.onEndReached()
      }
    });
  }

  fetchList = (page = 1) => {
    fetchSalesServicelApi({ page }).then(({ code, data }) => {
      if (code === 1000) {
        this.total = data.total;
        this.totalpage = data.totalpage;
        this.page = data.page;

        let { returnorderlist } = this.state;
        returnorderlist = returnorderlist.concat(data.returnlist);

        if (returnorderlist.length < data.limit) {
          this.setState({ showloadAllMessage: true })
        }
        this.setState({ returnorderlist }, () => {
          if (returnorderlist.length) {
            this.initPagination();
          }
        });
      }
    })
  }

  renderItem = (item, key) => {
    return (
      <OrderDetail key={key} item={item} />
    );
  }

  onEndReached = (page) => {
    this.fetchList(page)
  }

  renderOrderDetialList() {
    const { returnorderlist } = this.state;
    return (
      <div className="order-details-container">
        <div className="wrapper">
          <div className="scroller">
            {
              returnorderlist.map((item, index) => <OrderDetail key={index} item={item} />)
            }
            {
              this.state.showloadAllMessage &&
              <div className="load-all" key="all">
                <div>{returnorderlist.length ? '全部加载完毕' : '暂无数据'}</div>
              </div>
            }
          </div>
        </div>
      </div>
    )
  }

  renderNullPage() {
    return(
      <div className="no-order">
        <div>
          <img src={editBig} alt="" />
        </div>
        <div>
          <p>最近没有下过订单哦~</p>
          <Link className="button" to='/'>去首页看看</Link>
        </div>
      </div>
    )
  }

  render() {
    const { returnorderlist } = this.state;
    return (
      <div className="account-block sales-service">
        <div className="account-block__title" >
          售后服务
        </div>
        <div className="account-block__content ">
          { !returnorderlist.length ? this.renderNullPage() : this.renderOrderDetialList()}
        </div>
      </div>
    )
  }
}